<template>
  <div>
    <div class="pd15">
      <div v-if="loading">
        视图数据加载中...
      </div>
      <div v-else>
        <div v-if="!hasInit">
          视图数据加载出现错误
        </div>
        <div v-else>
          <a-form :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
            <a-row>
              <a-col v-for="(c,i) in list" :key="`condition${i}`" :span="6">
                <a-form-item :label="c.label">
                  <div v-if="c.condition==='between'">
                    <div v-if="c.type==='日期'">
                      <ZgDateRangePicker v-model="obj[c.code]" @change="onRangeChange(obj,c.code)"></ZgDateRangePicker>
                    </div>
                    <div v-else class="flx-s">
                      <ZgNumber style="width:45%" v-model="obj[c.code+'_s']"></ZgNumber>
                      <div>&nbsp;至&nbsp;</div>
                      <ZgNumber style="width:45%" v-model="obj[c.code+'_e']"></ZgNumber>
                    </div>
                  </div>
                  <div v-else-if="['like','startWith','endWith'].includes(c.condition)">
                    <ZgInput v-model="obj[c.code]"></ZgInput>
                  </div>
                  <div v-else-if="['>','>=','<','<='].includes(c.condition)">
                    <div v-if="c.type==='日期'">
                      <ZgDatePicker v-model="obj[c.code]"></ZgDatePicker>
                    </div>
                    <div v-else>
                      <ZgNumber v-model="obj[c.code]"></ZgNumber>
                    </div>
                  </div>
                  <div v-else>
                    <div v-if="c.type==='日期'">
                      <ZgDatePicker v-model="obj[c.code]"></ZgDatePicker>
                    </div>
                    <div v-else-if="c.type==='整数'">
                      <ZgNumber v-model="obj[c.code]"></ZgNumber>
                    </div>
                    <div v-else-if="c.type==='字典'">
                      <ZgDictionary :code="c.extra.字典类型" v-model="obj[c.code]"></ZgDictionary>
                    </div>
                    <div v-else-if="['单选框','开关'].includes(c.type)">
                      <ZgSelect :options="[{value:'是',label:'是'},{value:'否',label:'否'}]" v-model="obj[c.code]"></ZgSelect>
                    </div>
                    <div v-else>
                      <ZgInput v-model="obj[c.code]"></ZgInput>
                    </div>
                  </div>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <div class="flx-e">
            <ZgDropdown @click="onClickFilterBtn" type="link" class="mr10" :opts="[{label:'存为新的过滤器'},{label:'更新过滤器'},{label:'删除过滤器'}]">
              管理过滤器<i class="fa fa-ellipsis-h ml5"/>
            </ZgDropdown>
            <ZgButton @click="resetCondition" type="default" class="mr10" icon="refresh">重置</ZgButton>
            <ZgButton @click="searchWithCondition" icon="search">查询</ZgButton>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    showCondition: {
      type: Boolean,
      default: true
    },
    formId: {
      type: String,
      default: '0'
    }
  },
  data () {
    return {
      hasInit: false,
      loading: false,
      list: [],
      extra: {
        枚举编码: '',
        字典类型: ''
      },
      obj: null,
      defaultObj: null// 保存初始化默认值
    }
  },
  watch: {
    formId () {
      this.searchFilter()
    }
  },
  mounted () {
    this.searchFilter()
  },
  methods: {
    getCondition () {
      return JSON.stringify(this.obj)
    },
    setCondition (condition) {
      this.obj = Object.assign({}, this.defaultObj, JSON.parse(condition))
    },
    resetCondition () {
      // 所有参数设置默认值
    },
    searchWithCondition () {
      // 查询参数
      this.$emit('search', this.getCondition())
    },
    saveFilter () {
      const condition = this.getCondition()
      this.$prompt('请输入数据视图名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '视图名称',
        inputValidator: (value) => {
          if (!value || value.length === 0) {
            return '视图名称不能为空'
          }
          return true
        }
      }).then(({ value }) => {
        const param = {
          formId: this.table.id,
          name: value,
          condition: condition
        }
        this.$http.post('/zg-autoform/filter/save', param, () => {
          this.$success('操作成功')
          this.$emit('filterChange')
        })
      }).catch(() => {
      })
    },
    onRangeChange (obj, code) {
      obj[code + '_s'] = obj[code][0]
      obj[code + '_e'] = obj[code][1]
    },
    searchFilter () {
      this.hasInit = false
      this.loading = true
      const timer = setTimeout(() => {
        this.loading = false
      }, 30000)
      this.$http.get('/zg-autoform/filter/layout', { formId: this.formId }, data => {
        this.list = data[1].map(t => {
          const arr = data[0].filter(x => {
            return x.id === t.columnId
          })
          let extra
          try {
            extra = Object.assign({}, this.extra, JSON.parse(arr[0].extra))
          } catch (e) {
            extra = JSON.parse(JSON.stringify(this.extra))
          }
          return Object.assign({}, t, {
            id: arr[0].id,
            name: t.label,
            code: arr[0].code.toLowerCase(),
            type: arr[0].compType,
            condition: t.type,
            extra: extra
          })
        })
        // 生产数据对象
        const json = {}
        this.list.forEach(c => {
          if (['整数', '浮点数'].includes(c.type)) {
            if (c.condition === 'between') {
              json[c.code + '_s'] = 0
              json[c.code + '_e'] = 999
            } else {
              json[c.code] = 0
            }
          } else if (['日期', '日期时间'].includes(c.type)) {
            if (c.condition === 'between') {
              json[c.code + '_s'] = ''
              json[c.code + '_e'] = ''
              json[c.code] = []
            } else {
              json[c.code] = ''
            }
          } else if (['单选框', '开关'].includes(c.type)) {
            json[c.code] = '是'
          } else {
            json[c.code] = ''
          }
        })
        this.obj = json
        this.defaultObj = json
        this.$nextTick(() => {
          this.list.sort((a, b) => {
            return a.sort - b.sort
          })
          clearTimeout(timer)
          this.hasInit = true
          this.loading = false
        })
      })
    },
    onClickFilterBtn (t) {
      alert(JSON.stringify(t))
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
